<script setup lang="ts">
import { ref, computed } from "vue";
import { ReloadOutlined } from "@ant-design/icons-vue";
import ExamineDrawer from '@/components/ExamineDrawer.vue'
const dataSource = ref([]);
import {
  GetAdutiView,
  GetEmployeeViewDetails,
  GetQueryPersonalWorkPlan,
  PostSubmitAssessmenteMoloyee,
  GetQueryPersonalScore,
  GetQueryRealTimeScore,
  PostoneClickReview,
} from "@/api/main";
import moment from "moment";
import { message } from "ant-design-vue";
import useUserStore from "@/stores/modules/user";
const userStore = useUserStore();
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    align: "center",
    slots: { customRender: "index" },
  },
  {
    title: "考核名称",
    dataIndex: "assessmentName",
    key: "assessmentName",
    align:"center"
  },
  {
    title: "审核人",
    dataIndex: "reviewerName",
    key: "reviewerName",
    align:"center"
  },
  {
    title: "创建时间",
    dataIndex: "createdate",
    key: "createdate",
    align:"center"
  },
  {
    title: "节点名称",
    dataIndex: "nodeName",
    key: "nodeName",
    align:"center"
  },
  {
    title: "汇总类型",
    dataIndex: "summaryType",
    key: "summaryType",
    align:"center",
    slots: { customRender: "summaryType" },
  },
  {
    title: "流程状态",
    dataIndex: "status",
    key: "status",
    align:"center",
    slots: { customRender: "status" },
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];
const drawerDataSource = ref([]);
const drawerColumns = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    align: "center",
    slots: { customRender: "index" },
  },
  {
    title: "姓名",
    dataIndex: "empname",
    key: "empname",
    align: "center",
  },
  {
    title: "职务",
    dataIndex: "duty",
    key: "duty",
    align: "center",
  },
  {
    title: "部门名称",
    dataIndex: "orgName",
    key: "orgName",
    align: "center",
  },
  {
    title: "个人评分",
    dataIndex: "selfScore",
    key: "selfScore",
    align: "center",
  },
  {
    title: "部门评分",
    dataIndex: "departmentScore",
    key: "departmentScore",
    align: "center",
  },
  {
    title: "支部评分",
    dataIndex: "secretaryScore",
    key: "secretaryScore",
    align: "center",
  },
  {
    title: "分管领导评分",
    dataIndex: "departmentHeadScore",
    key: "departmentHeadScore",
    align: "center",
  },
  {
    title: "填报状态",
    dataIndex: "beforeSumStatus",
    key: "beforeSumStatus",
    slots: { customRender: "beforeSumStatus" },
    align: "center",
  },
  {
    title: "当前评级",
    dataIndex: "assessmentGrade",
    key: "assessmentGrade",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];

const getData = () => {
  GetAdutiView({
    empId: userStore.empid,
    status: 1,
  }).then((response: any) => {
    console.log(response);
    dataSource.value = response.data;
  });
};
getData();
const drawerRecord = ref(null);
const drawerVisible = ref<boolean>(false);
const handleShowDrawer = (record: any) => {
  drawerRecord.value = record;
  drawerVisible.value = true;
  detailsGetData();
};
const confirm = (record: any) => {
  PostoneClickReview({ summaryId: record.id }).then((response: any) => {
    if (response.code == 200) {
      message.success(response.msg);
      getData();
      drawerVisible.value = false;
    } else {
      message.error(response.msg);
    }
  });
};const detailsGetData = () => {
  GetEmployeeViewDetails({
    summaryId: drawerRecord.value.id,
  }).then((response: any) => {
    drawerDataSource.value = response.data;
  });
};

const drawerOptions = ref({
    title: '考核填报',
    width: '80%',
    visible: false,
})
const examineDrawerRefs = ref()
const showDrawer = (record: any, status: boolean) => {
    drawerOptions.value = {
        title: record.empname,
        width: '1300',
        visible: true,
        record: record,
        assessmentId: record.id
    }
    examineDrawerRefs.value.showDrawer(drawerOptions.value, status)
}
</script>

<template>
  <div style="display: flex; align-items: center; justify-content: flex-end">
    <ReloadOutlined class="operation-btn" @click="getData" />
  </div>
  <br />
  <a-table
    :dataSource="dataSource"
    :columns="columns"
    bordered
    :pagination="false"
    rowKey="id"
  >
    <template #index="{ index }">
      {{ index + 1 }}
    </template>

    <template #summaryType="{ record }">
      <span>
        <a-tag color="#BDB76B" v-if="record.summaryType == 0"
          >支部书记汇总</a-tag
        >
        <a-tag color="#87d068" v-if="record.summaryType == 1"
          >分管领导汇总</a-tag
        >
      </span>
    </template>
    <template #status="{ record }">
      <span>
        <a-tag color="error" v-if="record.status == 0">待发送</a-tag>
        <a-tag color="#87d068" v-if="record.status == 1">进行中</a-tag>
        <a-tag v-if="record.status == 2">审核完毕</a-tag>
      </span>
    </template>

    <template #action="{ record }">
      <span>
        <a-tag
          color="#108ee9"
          style="cursor: pointer"
          @click="handleShowDrawer(record)"
          >详情</a-tag
        >
      </span>
    </template>
  </a-table>
  <a-drawer
    :title="
      drawerRecord &&
      drawerRecord.assessmentName +
        '&nbsp;&nbsp;共&nbsp;' +
        drawerDataSource.length +
        '&nbsp;条数据'
    "
    width="1400"
    placement="right"
    v-model:visible="drawerVisible"
  >
    <a-table
      :dataSource="drawerDataSource"
      :columns="drawerColumns"
      bordered
      :pagination="false"
      rowKey="id"
    >
      <template #index="{ index }">
        {{ index + 1 }}
      </template>
      <template #beforeSumStatus="{ record }">
        <span>
          <a-tag color="error" v-if="record.beforeSumStatus == 1">未提交</a-tag>
          <a-tag color="#87d068" v-if="record.beforeSumStatus == 0"
            >已提交</a-tag
          >
        </span>
      </template>

      <template #action="{ record }">
        <span v-if="record.beforeSumStatus == 0">
          <a-tag
            color="#108ee9"
            style="cursor: pointer"
            @click="showDrawer(record, 1)"
            >详情</a-tag
          >
          <a-tag
            color="#108ee9"
            style="cursor: pointer"
            v-if="drawerRecord.status != 2"
            @click="showDrawer(record, 4)"
            >重新打分</a-tag
          >
        </span>
        <span v-else>/</span>
      </template>
    </a-table>
    <br />
    <br />
    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }"
    >
      <a-button style="margin-right: 8px" @click="() => (drawerVisible = false)"
        >关闭</a-button
      >
      <a-popconfirm
        v-if="drawerRecord && drawerRecord.status != 2"
        placement="topLeft"
        title="是否一键审核?"
        ok-text="是"
        cancel-text="否"
        @confirm="confirm(drawerRecord)"
      >
        <a-button type="primary">一键审核</a-button>
      </a-popconfirm>
    </div>
  </a-drawer>
  <ExamineDrawer ref="examineDrawerRefs" @getData="detailsGetData" />
</template>

<style scoped>
.operation-btn {
  border: 1px solid #f2f3f5;
  width: 35px;
  height: 35px;
  display: block;
  border-radius: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 10px;
  font-weight: 700;
}

.operation-btn:hover {
  background: #f2f3f5;
  color: #1677ff;
}
</style>
